<template>
  <div class='wrapper'>
    <div class="title">
      <h1>楼盘周边</h1>
      <p>查看地图<span class="iconfont ">&#xe743</span></p>
    </div>
    <div class="list-warp">
      <swiper :options="swiperOptions">
        <swiper-slide v-for="(item,index) of Ullist" :key="index">
          <div class="item" :class="itemShow === item[0]" @click="UllistClick(index)" ref="item">{{item.text}}</div>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 地图组件  -->
    <bd-map></bd-map>
  </div>
</template>

<script>

  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'  // 地图
  import BmMarker from 'vue-baidu-map/components/overlays/Marker' // 标注
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'  // 缩放控件
  import BdMap from 'common/map/Map'

  export default {
    name: 'Buildings',

    data () {
      return {
        itemShow: true,
        swiperOptions: {
          pagination: '.swiper-pagination', // 初始化元素
          slidesPerView: 5,
          freeMode: false,                  //
          updateOnWindowResize: false,      // 重新计算(update和breakpoints等)
          paginationType: false,            // 数字分页器
          observeParents: true,             // 自动刷新一次
          observer: true,                    // 监听自身、父元素发生变化就会自我刷新一次，解决宽度计算问题
        },
        Ullist: [{
          id: '0001',
          text: '新房'
        }, {
          id: '0002',
          text: '二手房'
        }, {
          id: '0003',
          text: '线路'
        }, {
          id: '0004',
          text: '地铁'
        }, {
          id: '0005',
          text: '公交'
        }, {
          id: '0006',
          text: '教育'
        }, {
          id: '0007',
          text: '银行'
        }, {
          id: '0008',
          text: '医院',
        }, {
          id: '0009',
          text: '购物'
        }, {
          id: '0010',
          text: '美食'
        }],
        center: {lng: 0, lat: 0},
        zoom: 3,
        // 标注点---经纬度数组
        list: [
          {lng: 112.945183, lat: 28.234254, txt: '第1个'},
          {lng: 112.95165, lat: 28.233872, txt: '第2个'},
          {lng: 112.947338, lat: 28.230689, txt: '第3个'},
          {lng: 112.942595, lat: 28.243164, txt: '第4个'},
          {lng: 112.948919, lat: 28.242082, txt: '第5个'},
          {lng: 112.935696, lat: 28.242909, txt: '第6个'}
        ]
      }
    },
    // 注册组件
    components: {
      BaiduMap,
      BmMarker,
      BmNavigation,
      BdMap
    },
    // 方法
    methods: {
      // 当前城市 定位
      handler ({BMap, map}) {
        console.log(BMap, map)
        this.center.lng = 112.94547
        this.center.lat = 28.234826
        this.zoom = 15
      },
      //  点击，去掉其他元素类 ,给当前元素添加类名
      UllistClick (index) {
        // console.log(index)
        // console.log(this.$refs.item)

        // 遍历拿到每个元素demo
        var list = this.$refs.item
        for (let i = 0; i < list.length; i++) {
          // 去掉他原先的样式
          list[i].className = 'item'
        }
        // 当前点击的元素 添加类名
        this.$refs.item[index].className = 'itemShow'
      }
    },
    mounted () {
      console.log('页面挂载完成')
      // 给第一个元素添加上类名
      this.$refs.item[0].className = 'item itemShow'
    }
  }

</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()
    TopBorder()

  .title
    display flex
    justify-content space-between
    line-height 1.3rem

  .title h1
    font-size .35rem
    font-weight bolder

  .list
    display flex
    align-items center
    height 1.3rem
    line-height 1.3rem
    overflow-x auto


  .list .item
    display inline-block
    position relative
    min-width 1.386667rem
    text-align center
    border-radius .106667rem

  .bm-view
    width 100%
    height 300px

  .item, .itemShow
    width 1.3rem
    height .8rem
    line-height .8rem
    text-align center
    margin .3rem auto
    font-weight bold

  .itemShow
    background #a2c412
    color #f8f7f7
    border-radius .1rem

  .itemShow:before
    content: " ";
    position: absolute;
    top: 1.05rem;
    left: 50%;
    width: 0;
    height: 0;
    margin-left -0.15rem
    border-width: 8px;
    border-style: solid;
    border-color: #a3c512 transparent transparent;


</style>
